<template>
	<view class="relative full-screen">
		<view style="z-index:0;position:absolute;left:0;right:0;top:0;height:396px;background-image:radial-gradient(circle at left top, #D8230A26 50%, transparent 50%);background-size:396px 396px;background-repeat:no-repeat;filter:blur(50px);"></view>
		<uni-nav-bar ref="navBar" fixed statusBar title="选择城市" :border="false" backgroundColor="transparent"
			@clickLeft="goBack">
			<template v-slot:left>
				<image class="size-32" src="@/static/svg/icon-back.svg" />
			</template>
		</uni-nav-bar>
		<view class="flex-col w-full" :style="`height: calc(100vh - ${navBarHeight || 0}px);`">
			<search-bar v-model="searchWord" placeholder="请输入城市名" @search="doSearch" @clean="onClean" />
			<view class="w-full flex-1 flex" style="height:0;overflow:auto;">
				<scroll-view ref="navScrollView" :scroll-into-view="navScrollIntoView" class="h-full left-nav"
					scroll-y="true">
					<view v-for="(item,index) in allRegionList" :key="index" :id="`id_${item.id}`"
						class="left-nav-name flex center" :class="current === index ? 'active': ''"
						@click="onNavItemClick(item,index)">
						<text>{{item.localName}}</text>
					</view>
				</scroll-view>
				<scroll-view ref="contentScrollView" :scroll-into-view="contentScrollIntoView" class="h-full content-scroll-view"
					scroll-y="true" style="calc(100% - 90px)">
					<view v-for="(item,index) in allRegionList" :key="index" :id="`id_${item.id}`" class="right-content">
						<view class="title" :class="current === index ? 'active': ''">
							<text>{{item.localName}}</text></view>
						<view class="grid" style="grid-gap:12px;">
							<text class="grid-item" v-for="(sub,j) in item.regions" :key="`${index}-${j}`"
								:class="city===sub.localName?'active':''"
								@click="onSelect(sub)">{{sub.localName}}</text>
						</view>
					</view>
					<view class="flex center py-30 fs-14 text-color-hint">努力开辟中...</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script setup name="SelectCity">
	import {
		computed,
		onMounted,
		ref,
		unref,
		watch,
		getCurrentInstance,
		nextTick,
	} from 'vue'
	import {
		getListRegionApi
	} from '@/api/index.js'

	const instance = getCurrentInstance()

	const navBar = ref(null)

	const goBack = () => uni.navigateBack()

	const navBarHeight = computed(() => {
		const statusBarHeight = uni.getWindowInfo().statusBarHeight
		const navigationBarHeight = statusBarHeight + (navBar.value && navBar.value.height || 0)
		return navigationBarHeight
	})
	
	const searchWord = ref('')
	const current = ref(0)
	const city = ref('')
	const navScrollView = ref(null)
	const navScrollIntoView = ref('')
	const contentScrollView = ref(null)
	const contentScrollIntoView = ref('')
	
	const onClean = () => {
		searchWord.value = ''
		getAllRegion()
	}

	const doSearch = () => {
		getAllRegion()
	}

	const onNavItemClick = (item, index) => {
		current.value = index
		contentScrollIntoView.value = `id_${item.id}`
	}

	const onSelect = (item) => {
		city.value = item.localName
		const eventChannel = instance.ctx.getOpenerEventChannel()
		eventChannel.emit('onCitySelect', unref(city.value))
		uni.navigateBack()
	}

	let observer
	let visiableIds = ref([])

	const allRegionList = ref([])
	const getAllRegion = () => {
		getListRegionApi(searchWord.value).then(res => {
			allRegionList.value = res
			nextTick(() => {
				observer.relativeTo('.content-scroll-view').observe('.right-content', (res) => {
					// console.log('可见性？', res, visiableIds.value)
					if (res.intersectionRatio > 0) {
						if (!visiableIds.value.includes(res.id)) {
							visiableIds.value.push(res.id)
						}
					} else if (res.intersectionRatio === 0) {
						if (visiableIds.value.includes(res.id)) {
							visiableIds.value = visiableIds.value.filter(id => id !== res.id)
						}
					}
					if (visiableIds.value.length) {
						const index = allRegionList.value.findIndex(it => `id_${it.id}` === visiableIds.value[0])
						current.value = index
						navScrollIntoView.value = visiableIds.value[0]
					}
				})
			})
		})
	}

	onMounted(() => {
		getAllRegion()
		observer = uni.createIntersectionObserver(instance, {
			observeAll: true
		})
	})
</script>

<style lang="scss" scoped>
	.left-nav {
		width: 90px;
		border-right: 0.5px solid #E0E0E0;

		.left-nav-name {
			color: rgba(51, 51, 51, 0.60);
			text-align: center;
			font-family: PingFang SC;
			font-size: 16px;
			font-style: normal;
			font-weight: 400;
			line-height: normal;
			text-align: center;

			&:not(:last-child) {
				margin-bottom: 26px;
			}

			&.active {
				position: relative;
				color: #FA4543;
				font-weight: 600;

				&::before {
					content: '';
					position: absolute;
					left: 0;
					display: inline-block;
					width: 4px;
					height: 26px;
					flex-shrink: 0;
					border-radius: 4px;
					background: #FA4543;
				}
			}
		}
	}

	.right-content {
		padding-left: 25px;

		.title {
			color: rgba(51, 51, 51, 0.60);
			font-family: PingFang SC;
			font-size: 16px;
			font-style: normal;
			font-weight: 400;
			line-height: normal;
			margin-top: 14px;
			margin-bottom: 12px;

			&.active {
				color: #333;
				font-weight: 600;
			}
		}

		.grid-item {
			display: inline-flex;
			padding: 4px 20px;
			justify-content: center;
			align-items: center;
			border-radius: 8px;
			background: #fff;
			color: #333;
			text-align: center;
			font-family: PingFang SC;
			font-size: 16px;
			font-style: normal;
			font-weight: 400;
			line-height: normal;

			&.active {
				border: 1px solid #FA4543;
				background: #FFF;
				color: #FA4543;
			}
		}
	}
</style>